<template>
<view class="question-box">
	<view class="topic-nav">
		<image :src="$imgUrl + '/personal/back-icon.png'" @click="back" mode=""></image>
		<view>问卷调研</view>
		<image :src="$imgUrl + '/personal/back-icon.png'" style="visibility: hidden;" mode=""></image>
	</view>
	<view class="ques-btm">
		<view v-if="!startStatus">
			<view class="ques-content">
				<view class="ques-title" :style="{'visibility': !startStatus?'visible':'hidden'}">
					<span v-if="quesInfo.name"></span>
					<view>{{quesInfo.name}}</view>
				</view>
				<image :src="quesInfo.image" v-if="quesInfo.image" class="ques-icon" mode=""></image>
				<image :src="$imgUrl + '/personal/question-icon.png'" v-else class="ques-icon" mode=""></image>
			</view>
			<view class="ques-start">
				<view class="ques-start-n" v-if="quesInfo.description">
					{{quesInfo.description}}
				</view>
				<view class="ques-start-btn disabled" v-if="!curId">暂无问券可填</view>
				<view class="ques-start-btn disabled" v-else-if="isParticipate">问卷已填写</view>
				<view class="ques-start-btn disabled" v-else-if="!quesInfo.isPublished">问卷未发布</view>
				<view class="ques-start-btn disabled" v-else-if="quesInfo.questionnaireStatus==1">问卷未开始</view>
				<view class="ques-start-btn disabled" v-else-if="quesInfo.questionnaireStatus==3">问卷已结束</view>
				<view class="ques-start-btn" v-else @click="startStatus = true">开始问卷填写</view>
			</view>
		</view>
		<view class="ques-item" v-else>
			<view v-for="(item,i) in questionItems">
				<image :src="item.image" v-if="item.image&&step == i+1" class="ques-icon" mode=""></image>
				<view class="ques-box" v-if="step == i+1">
					<view class="progress-bar">
						<span>{{i+1}}</span>/{{questionItems.length}}
						<span class="span-icon" :style="{'width': `${step/questionItems.length*100}%`}"></span>
					</view>
					<view class="ques-c">Q{{i+1}}: {{item.name}}
						<span v-if="item.type==1">[单选]</span>
						<span v-if="item.type==2">[多选]</span>
						<span v-if="item.type==3">[填空]</span>
						<span v-if="item.type==4">[单选填空]</span>
						<span v-if="item.type==5">[图片题]</span>
					</view>
					<!-- 1单选 -->
					<view v-if="item.type==1">
						<u-radio-group v-model="userAnswer[i].checkIndex" shape="circle" activeColor="#fd9618" placement="column" @change="radioChange($event,i)">
							<u-radio v-for="(option, o) in item.optionItems" :key="o" :label="`${option.name.slice(2,4)}.${option.content}`" :name="o">
							</u-radio>
						</u-radio-group>
					</view>
					<!-- 2多选 -->
					<view v-if="item.type==2">
						<u-checkbox-group v-model="userAnswer[i].checkIndex" activeColor="#fd9618" placement="column" @change="checkboxChange($event,i)">
							<u-checkbox v-for="(option, o) in item.optionItems" :key="o" :label="`${option.name.slice(2,4)}.${option.content}`" :name="o">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<!-- 填空 -->
					<view v-if="item.type==3">
						<view class="u-input u-border u-input--radius u-input--square">
							<textarea placeholder="请输入内容" class="uni-input" v-model="userAnswer[i].userAnswers[0].fillBlank" maxlength="500" />
							<view class="num">{{userAnswer[i].userAnswers[0].fillBlank&&userAnswer[i].userAnswers[0].fillBlank.length || 0}}/500</view>
						</view>
					</view>
					<!-- 单选填空 -->
					<view v-if="item.type==4">
						<u-radio-group v-model="userAnswer[i].checkIndex" shape="circle" activeColor="#fd9618" placement="column" @change="changeInputRadio($event,i)">
							<view v-for="(option, o) in item.optionItems" :key="o" style="margin-bottom: 10rpx;">
								<u-radio :label="`${option.name.slice(2,4)}.${option.content}`" :name="o" />
								<view class="u-input u-border u-input--radius u-input--square" v-if="option.optionFlag">
									<textarea placeholder="请输入内容" class="uni-input h100" v-model="option.fillBlank" @input="changeInputRadio(o,i)" maxlength="500" />
									<view class="num">{{option.fillBlank&&option.fillBlank.length || 0}}/500</view>
								</view>
							</view>
						</u-radio-group>
					</view>
					<!-- 图片题 -->
					<view v-if="item.type==5">
						<u-radio-group v-model="userAnswer[i].checkIndex" shape="circle" activeColor="#fd9618" placement="column" @change="changeImgRadio($event,i)">
							<view v-for="(option, o) in item.optionItems" :key="o">
								<u-radio :label="`${option.name.slice(2,4)}.${option.content}`" :name="o" />
								<image :src="option.image" mode="" style="width: 180rpx;height: 180rpx;margin-left: 20rpx;" @click="previewPic(item.optionItems,o)"></image>
							</view>
						</u-radio-group>
					</view>
					<view class="set-item">
						<span class="set-item-p" @click="next(i+2)" v-if="i<questionItems.length-1">下一题</span>
						<span class="set-item-m" v-if="i>0" @click="prev(i)">上一题</span>
					</view>
				</view>
			</view>
			<view class="ques-start-btn" v-if="step==questionItems.length" @click="submit">提交问卷</view>
			<!-- <view class="ques-start-btn disabled" v-else>提交问卷</view> -->
		</view>
	</view>
</view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import { questionInfo,questionAnswer,participateOrNot } from '@/common/API/member'
import { onLoad } from "@dcloudio/uni-app"

const curId = ref()
const quesInfo = ref({})
const isParticipate = ref(false)
onLoad((options)=>{
	curId.value = options.id
	if(options.id){
		getQuesList()
		getIsAnwser()
	}
})

const getIsAnwser = async ()=>{
	let res = await participateOrNot({
		id: curId.value,
		userId: uni.getStorageSync('userId')
	})
	isParticipate.value = res
}

// 获取问题列表
let userAnswer = ref<any>([])
const questionItems = ref([])
const getQuesList = async ()=>{
	let res = await questionInfo(curId.value)
	quesInfo.value = res
	questionItems.value = res.questionItems
	userAnswer.value = res.questionItems.map((item)=>{
		return {
			id: item.id,
			userAnswers:[
				{
					optionId: '',
					name: '',
					content: '',
					fillBlank: '',
					image: '',
					checkIndex: ''
				}
			]
		}
	})
}

const startStatus = ref(false)
const step = ref(1)

// 下一题
const next = (val:number) => {
	let ques = questionItems.value[val-2]
	let answer = userAnswer.value[val-2]
	if(isAnwser(ques,answer)){
		step.value = val
	}
}

// 上一题
const prev = (val:number) => {
	step.value = val
}

// 判断问题是否输入
const isAnwser = (ques,answer)=>{
	if(ques.type==2&&ques.selectNum&&answer.userAnswers.length>ques.selectNum){
		// 多选题限制数量ques.selectNum
		uni.showToast({
			title:`此题最多可选${ques.selectNum}个`,
			icon: 'none'
		})
		return false
	}else if((ques.type==1||ques.type==2||ques.type==4||ques.type==5)&&!answer.userAnswers[0].optionId){
		// 其他三种题型必须选择至少一个选项
		uni.showToast({
			title:'请选择你的答案',
			icon: 'none'
		})
		return false
	}else if(ques.type==3&&!answer.userAnswers[0].fillBlank){
		// 填空题输入内容
		uni.showToast({
			title:'请输入填空题答案',
			icon: 'none'
		})
		return false
	}else if(ques.type==4&&!checkOptionFlag(answer.userAnswers[0])){
		// 单选填空题输入内容
		uni.showToast({
			title:'请输入填空内容',
			icon: 'none'
		})
		return false
	}else{
		return true
	}
}

// 单选填空题判断 是否有要填写的未填写
const checkOptionFlag = (answer)=>{
	if(answer.optionFlag&&!answer.fillBlank){
		return false
	}else{
		return true
	}
}

const back = () => {
	uni.navigateBack({
		delta: 1
	});
}
//提交
const submit = async () => {
	console.log(1)
	// 验证最后一题选了没有
	let ques = questionItems.value[questionItems.value.length-1]
	let answer = userAnswer.value[userAnswer.value.length-1]
	if(isAnwser(ques,answer)){
		let data = {
			id: curId.value,
			userQuestions: userAnswer.value
		}
		uni.showLoading({
			title: '提交中...',
			mask: true
		})
		let res = await questionAnswer(data)
		uni.hideLoading()
		uni.redirectTo({
			url: '/pages/personal/question/success'
		})
	}
}
// 单选处理
const radioChange = (e,i) => {
	userAnswer.value[i].userAnswers[0].optionId = questionItems.value[i].optionItems[e].id
	userAnswer.value[i].userAnswers[0].name = questionItems.value[i].optionItems[e].name
	userAnswer.value[i].userAnswers[0].content = questionItems.value[i].optionItems[e].content
}
// 多选处理
const checkboxChange = (e,i) => {
	userAnswer.value[i].userAnswers = []
	e.forEach((index)=>{
		userAnswer.value[i].userAnswers.push({
			optionId: questionItems.value[i].optionItems[index].id,
			name: questionItems.value[i].optionItems[index].name,
			content: questionItems.value[i].optionItems[index].content
		})
	})
}
// 单选填空
const changeInputRadio = (e,i) => {
	console.log(userAnswer.value[i].checkIndex)
	if(userAnswer.value[i].checkIndex==e){
		userAnswer.value[i].userAnswers[0].optionId = questionItems.value[i].optionItems[e].id
		userAnswer.value[i].userAnswers[0].name = questionItems.value[i].optionItems[e].name
		userAnswer.value[i].userAnswers[0].content = questionItems.value[i].optionItems[e].content
		userAnswer.value[i].userAnswers[0].fillBlank = questionItems.value[i].optionItems[e].fillBlank
		userAnswer.value[i].userAnswers[0].optionFlag = questionItems.value[i].optionItems[e].optionFlag
	}
}
// 图片题
const changeImgRadio = (e,i) => {
	userAnswer.value[i].userAnswers[0].optionId = questionItems.value[i].optionItems[e].id
	userAnswer.value[i].userAnswers[0].name = questionItems.value[i].optionItems[e].name
	userAnswer.value[i].userAnswers[0].content = questionItems.value[i].optionItems[e].content
	userAnswer.value[i].userAnswers[0].image = questionItems.value[i].optionItems[e].image
}

// 图片题 图片预览
const previewPic = (items,i)=>{
	let arr = items.map(item=>item.image)
	uni.previewImage({
		urls: arr,
		current: i
	})
}
</script>
<style>
page{
	height: 100%;
	/* background: linear-gradient(180deg, rgba(254, 145, 105, 0.2) 0%, rgba(255, 88, 107, 0) 100%) no-repeat; */
	/* background-size: 750rpx 100%; */
	background: linear-gradient(180deg, rgba(252, 210, 102, 0.3) 0%, rgba(254, 145, 105, 0.2) 50%, rgba(255, 88, 107, 0) 100%);
}
</style>
<style lang="scss" scoped>
.question-box{
	display: flex;
	flex-direction: column;
	height: 100%;
	// overflow: hidden;
	padding: var(--status-bar-height) 0 40rpx;
}
.ques-btm{
	flex: 1;
	overflow-y: auto;
}
.topic-nav{
	display: flex;
	align-items: center;
	height: 84rpx;
	justify-content: s;
	&>image{
		width: 17rpx;
		height: 31rpx;
		padding: 0 32rpx;
	}
	&>view{
		flex: 1;
		text-align: center;
		font-size: 34rpx;
	}
}
.ques-content{
	text-align: center;
	.ques-title{
		display: flex;
		align-items: center;
		padding: 40rpx 32rpx 50rpx 32rpx;
		span{
			width: 8rpx;
			height: 28rpx;
			display: inline-block;
			border-radius: 50%;
			background: rgba(253, 150, 24, 1);
			margin-right: 16rpx;
		}
		view{
			color: rgba(77, 77, 77, 1);
			font-size: 32rpx;
		}
	}
	.ques-icon{
		width: 552rpx;
		height: 416rpx;
		margin: 0 auto;
	}
}
.ques-start{
	.ques-start-n{
		margin: 32rpx;
		padding: 30rpx 32rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 16rpx  rgba(0, 0, 0, 0.04);
		color: rgba(102, 102, 102, 1);
		font-size: 28rpx;
	}
}
.ques-item{
	.ques-icon{
		display: block;
		width: 552rpx;
		height: 416rpx;
		margin: 20rpx auto 0;
	}
	.progress-bar{
		color: rgba(204, 204, 204, 1);
		position: relative;
		border-bottom: 6rpx solid rgba(204, 204, 204, 1);
		margin-bottom: 32rpx;
		span{
			font-size: 52rpx;
			color: rgba(253, 150, 24, 1);
		}
		.span-icon{
			content: " ";
			position: absolute;
			left: 32rpx;
			transform: translateX(-32rpx);
			bottom: -6rpx;
			width: 20%;
			display: inline-block;
			height: 6rpx;
			background: rgba(253, 150, 24, 1);
		}
	}
	.ques-box{
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 16rpx  rgba(0, 0, 0, 0.04);
		margin: 32rpx;
		padding: 32rpx;
		.item-textarea{
			width: 574rpx;
			height: 272rpx;
			border-radius: 8rpx;
			background: rgba(0, 0, 0, 0.04);
			padding: 24rpx;
			font-size: 28rpx;
		}
		.ques-c{
			font-size: 32rpx;
			color: rgba(0, 0, 0, 1);
			font-weight: bold;
			span{
				color: rgba(253, 150, 24, 1);
			}
		}
		.item-image{
			width: 622rpx;
			height: 348rpx;
			background: rgba(224, 224, 224, 1);
			margin-top: 24rpx;
		}
		.ques-b-i{
			display: flex;
			align-items: center;
			margin: 24rpx 24rpx 0 0;
		}
		.item-icon{
			width: 28rpx;
			height: 28rpx;
			border: 1px solid rgba(204, 204, 204, 1);
			border-radius: 50%;
			display: inline-block;
			margin-right: 24rpx;
		}
		.item-check{
			width: 38rpx;
			height: 38rpx;
			background: url('#{$imgUrl}/personal/radio-icon.png');
			background-size: 100%;
			display: inline-block;
			margin-right: 18rpx;
		}
		.set-item{
			display: flex;
			flex-direction: row-reverse;
			padding-top: 96rpx;
			span{
				display: inline-block;
			}
			.set-item-m{
				margin-right: 96rpx;
				color: rgba(253, 150, 24, 1);
			}
			.set-item-p{
				color: rgba(253, 150, 24, 1);
			}
		}
		.check-item{
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			grid-gap: 20rpx 20rpx;
			margin-top: 32rpx;
			&>view{
				text-align: center;
				view{
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			span{
				width: 28rpx;
				height: 28rpx;
				border: 1px solid rgba(204, 204, 204, 1);
				border-radius: 50%;
				display: inline-block;
				margin-right: 24rpx;
			}
			image{
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
	.item-text{
		margin-top: 24rpx;
	}
}
.ques-start-btn{
	border-radius: 200rpx;
	background: rgba(253, 150, 24, 1);
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	padding: 20rpx 0;
	margin: 68rpx 32rpx 68rpx;
	&.disabled{
		background: #bfbfbf;
	}
}
.u-input{
	padding: 12rpx 18rpx 48rpx;
	border-radius: 8rpx;
	margin-top: 14rpx;
	position: relative;
	.uni-input{
		font-size: 28rpx;
		width: auto;
		height: 230rpx;
		overflow: hidden;
	}
	.h100{
		height: 100rpx;
	}
	.num{
		position: absolute;
		right: 20rpx;
		bottom: 4rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}
}
</style>
